<!--
 * @Description: 地图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:25:47
-->
<template>
  <div ref="map" style="height: 400px"></div>
</template>

<script>
import { get } from "@/utils/request.js";
// 导入vuex 辅助函数
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      // 存放设备信息
      myData: [],
    };
  },
  computed: {},
  methods: {
    // 引入mutations里的方法
    ...mapMutations(["SET_ED"]),
    // 获取数据
    async loadData() {
      let res = await get("/dashboard/findEngineerDeviceTree");
      // 处理数据，将设备信息抽离出新数组来
      let temp = [];
      res.data.forEach((item) => {
        // item-->工程
        item.children.forEach((it) => {
          // it-->设备
          temp.push(it);
        });
      });
      // 保存数据到数据模型里      
      // console.log(temp,'获取数据');
      this.myData = temp;
      // console.log(this.myData);
      this.drawMap();
    },

    // 绘制地图
    drawMap() {
      var map = new AMap.Map(this.$refs.map, {
        zoom: 11,//级别
        center: [103.839949, 36.069335],//中心点坐标
        viewMode: '3D',//使用3D视图
        mapStyle: 'amap://styles/blue', //设置地图的显示样式
      });
      //实时路况图层
      var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
      });
      map.add(trafficLayer);//添加图层到地图
      let polygons = [];
      var opts = {
        subdistrict: 0, //获取边界不需要返回下级行政区
        extensions: "all", //返回行政区边界坐标组等具体信息
        level: "district", //查询行政级别为 市
      };
      let district = new AMap.DistrictSearch(opts);
      district.setExtensions("all");
      district.search("兰州市", function (status, result) {
        map.remove(polygons); //清除上次结果
        polygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#80d8ff",
              strokeColor: "#0091ea",
            });
            polygons.push(polygon);
          }
        }
        map.add(polygons);
        map.setFitView(polygons); //视口自适应
      });
      // 动态生成标记点
      this.myData.forEach((item) => {
        var marker = new AMap.Marker({
          position: item.position,//位置
          icon: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',

          title: item.name,
          anchor: 'bottom-left', // 设置锚点方位
          // 标记点携带数据
          extData: item
        })
        // 将组件实例赋值给某一个变量
        let vm = this;
        marker.on('click', function () {
          // this ---> 标记点不是组件实例
          vm.SET_ED({
            engineer_id: this.getExtData().engineer_id,
            device_id: this.getExtData().id,
          })
          console.log(this.getExtData(), '获取数据');
        })
        map.add(marker);//添加到地图
      })
    }
  },
  created() { },
  mounted() {
    this.loadData();
  },
};
</script>
<style>
.amap-icon img {
  width: 30px;
  height: 40px;
}
</style>